<style lang="scss" scoped>
.box{
    margin: 30px auto;
    background: #FFFFFF;
    box-shadow: 0 3px 9px 0 rgba(0,0,0,0.09);
    width:100%;
    height: 498px;
    img{
        float:left;width:795px;
        padding:25px;
        z-index: 10;
        object-fit: contain;
    }
    ul{
        width:345px;
        height: 100%;
        border: 1px solid #D4D4D4;
        border-left: 0;
        float: right;
        display: flex;
        text-align: left;
        flex-direction: column;
        justify-content: space-between;
        li{
            cursor: pointer;
            border-left: 1px solid #D4D4D4;
            height: 100%;
            padding: 0 30px;
            border-bottom: 1px solid #D4D4D4;
            position: relative;
            h3{
                text-align: left;
                line-height: 45px;
            }
            p{
                color: #666;
            }
            &.active{
                color: #fff;
                background: var(--blue);
                h3{
                    color: #fff;
                }
                &::before{
                    display: block;
                    content: "";
                    width:30px;
                    height: 30px;
                    transform: rotate(45deg);
                    background: #fff;
                    position:absolute;
                    left: -15px;
                    top:0;
                    bottom: 0;
                    margin: auto;
                }
                p{
                    color: #fff;
                }
            }
            
        }
    }
}
</style>

<template>
    <div class="container">
        <a id="agent"></a>
        <div class="box">
            <img :src=" require(`@/assets/box3_pic${hover+1}.png`) ">
            <ul>
                <li v-for="(v,i) in txt"  :key="i" :class="{active:hover===i}"  @mouseover="hover=i">
                    <h3>{{v[0]}}</h3>
                    <p>{{v[1]}}</p>
                </li>
            </ul>
            <div class="clear"></div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            hover:1,
            txt:[
                ['数量多','客户的专利数量多，时间紧，代理人来不及撰写稿件？派智平台使用云代理人分发，再多的专利也能轻松化解'],
                ['种类全','派智平台为您提供各种行业和各种特殊领域的代理人为您服务，再也不用担心客户的行业和所在特殊领域了'],
                ['成本低','派智平台使用云分发，将专利分配和最合适的代理人，平台价格透明，特殊领域应有尽有，从而最大程度的降低了撰写成本']
            ]
        }
    }
}
</script>
